import React from 'react';
import { Text, View } from '@ray-js/ray';
import clsx from 'clsx';
import Strings from '@/i18n';
import styles from './index.module.less';

const formatTime = (time: number) => {
  const hour = String(Math.floor(time / 60)).padStart(2, '0');
  const minute = String(time % 60).padStart(2, '0');
  return `${hour}${Strings.getLang('hour')} : ${minute}${Strings.getLang('minute')}`;
};

export function TimeRemainer({ value }: { value: number }) {
  return (
    <View className={styles.container}>
      <Text className={styles.title}>{Strings.getLang('timeRemainer')}</Text>
      <View className={clsx(styles.switchBox)}>
        <Text>{formatTime(value)}</Text>
      </View>
    </View>
  );
}
